<template>
  <view>
    <sk-container v-if="enterprise.Enterprise_Address == undefined">
      <view class="guj" style="height: calc(100vh);">
        <sk-waterfall waterfall length:30></sk-waterfall>
      </view>
    </sk-container>
    <view class="w-100 content" v-else>
      <!--  -->
      <view class="title">
        <view class="left">
          <image v-if="enterprise.Enterprise_Logo" :src="Domain_Business + enterprise.Enterprise_Logo"
            style="width: 100%; height: 100%" mode=""></image>
          <image v-else src="https://digital.essc.top/dist/zjl_icon/NoLogo.png" style="width: 100%; height: 100%" mode="">
          </image>
        </view>
        <view class="right">
          <view class="view">{{ enterprise.Enterprise_Name }}</view>
          <view class="text-secondary view">企业地址：{{ enterprise.Enterprise_Address }}</view>
          <view class="view">相关文化 : {{ enterprise.Enterprise_Profile == "" ? "该用户暂未添加" : enterprise.Enterprise_Profile }}</view>
        </view>
      </view>
      <!--  -->
      <view class="cont">
        <view v-if="traceability.length == 0" class="tit">该用户暂未添加溯源基地</view>
        <view class="title" v-else>溯源基地展示</view>
        <view class="su" v-for="(item, index) in traceability" :key="index">
          <view class="left">
            <video :src="Domain_Video + item.Video_URL" class="vid"></video>
          </view>
          <view class="right">
            <view class="view">{{ item.Traceability_Base_Name }} </view>
            <view class="view">人数：{{ item.People_Number }} </view>
            <view class="view">生产经营：{{ item.Traceability_Base_Production }}</view>
            <view class="view">企业地址：{{ item.Traceability_Base_Address }}</view>
            <view class="view">{{ item.Cultural_Information }}</view>
          </view>
        </view>
      </view>

      <view class="item" v-for="(item, index) in tableData" :key="index" @click="
        handleTabs(
          item.Group_Purchasing_SerialNumber,
          item.Enterprise_Info_SerialNumber
        )
        ">
        <view class="leftimg">
          <image class="image" :src="Domain_IMG + item.Picture_URL" mode="scaleToFill" />
        </view>
        <view class="right">
          <view class="title2 view">{{ item.Article_Name }}</view>
          <view class="jg view">{{ item.Total_Quantity + "/" + item.Unit }}</view>
          <view class="fl view">{{ item.Category_Name }}</view>
          <view class="cont2 view">
            <view class="left">
              <view class="mt-2">发布人:{{ item.Contacts }} </view>
              <view class="mt-2">所属企业 :{{ item.Enterprise_Name }} </view>
            </view>
          </view>
          <view class="but view"> 查看详情 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import { TraceabilityEnterpriseID } from "@/api/traceability.js";
import { GroupProcureAll } from "@/api/group.js";
export default {
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
      Domain_IMG: app.globalData.Domain_IMG,
      Domain_Business: app.globalData.Domain_Business,
      Domain_Video: app.globalData.Domain_Video,
      form: {
        Article_Name: "",
        Category_SerialNumber: "",
        Enterprise_Info_SerialNumber: "",
        Type: "0",
        page: 1, //页数
        limit: 5, //每页数据条数
      },
      total: 0,
      tableData: [],
      enterprise: {
        // Enterprise_Profile:"1"
      },
      traceability: [],
    };
  },
  methods: {
    handleTabs(Group_Purchasing_SerialNumber, Enterprise_Info_SerialNumber) {
      //跳转
      uni.navigateTo({
        url:
          "/pages/Market/MarketDetail?Group_Purchasing_SerialNumber=" +
          Group_Purchasing_SerialNumber +
          "&Enterprise_Info_SerialNumber=" +
          Enterprise_Info_SerialNumber,
      });
    },
    async getData(Enterprise_Info_SerialNumber) {
      const res = await TraceabilityEnterpriseID({
        data: {
          Enterprise_Info_SerialNumber,
        },
      });
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        res.REDIRECT == "REDIRECT"
      ) {
        console.log(res.redirect);
      } else if (res.Status == "success") {
        this.enterprise = res.Data;
        this.traceability = res.Traceability;
      }
    },
    async getSupply(data) {
      //分页查询所有供应数据
      const res = await GroupProcureAll({
        data,
      });
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        res.REDIRECT == "REDIRECT"
      ) {
        console.log(res.redirect);
      } else if (res.Status == "success") {
        console.log(res);
        this.tableData = res.tableData;
        // this.total = parseInt(res.limit);
        // this.loading = false;
      }
    },
  },
  onLoad(option) {
    this.form.Enterprise_Info_SerialNumber =
      option.Enterprise_Info_SerialNumber;
    this.getData(option.Enterprise_Info_SerialNumber);
    this.getSupply(this.form);
  },
};
</script>
<style lang="scss">
.content {
  background-color: #f5f5f5;
  height: calc(100vh);
  overflow: auto;
  padding: 20rpx;
  box-sizing: border-box;

  .tit {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .title {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 30rpx 0;

    .left {
      width: 160rpx;
      height: 160rpx;
    }

    .right {
      //   width: 60%;
      padding: 40rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 30rpx;

      .view {
        margin: 10rpx 0;
      }
    }
  }

  .cont {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 0 0 20rpx 0;

    .su {
      display: flex;
      align-items: center;

      .left {
        width: 200rpx;
        height: 200rpx;
        padding: 20rpx;

        .vid {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        width: 60%;
        padding: 20rpx;
        box-sizing: border-box;
        font-size: 24rpx;

        .view {
          margin: 10rpx 0;
        }
      }
    }
  }

  .item {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 25rpx;
    box-sizing: border-box;
    margin: 0 0 30rpx 0;
    display: flex;

    // width: 60%;
    .leftimg {
      display: flex;
      align-items: center;
      justify-content: center;

      .image {
        width: 258rpx;
        height: 258rpx;
        border-radius: 20rpx;
        margin: 0 10rpx 0 0;
      }
    }

    .right {
      width: 60%;
      padding: 10rpx;
      box-sizing: border-box;
      flex: 1;

      .fl {
        font-size: 28rpx;
      }
    }

    .title2 {
      font-size: 34rpx;
      color: #222;
      line-height: 34rpx;
      font-weight: 500;
    }

    .jg {
      font-size: 34rpx;
      color: #ff442f;
      vertical-align: middle;
      margin-right: 20rpx;
      // flex: 0 0 auto;
      margin: 20rpx 0 20rpx;
    }

    .cont2 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        font-size: 26rpx;
        color: rgba(34, 34, 34, 0.5);
        line-height: 26rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .view {
          margin-top: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .but {
      margin: 20rpx 0 0 0;
      width: 132rpx;
      height: 54rpx;
      border: 1px solid #39bf3e;
      border-radius: 28rpx;
      font-size: 26rpx;
      color: #39bf3e;
      text-align: center;
      letter-spacing: 0;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>